﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="./jquery1.9/jquery-1.9.0.min.js"></script>
    <script src="./ajax.js"></script>
    <script>
        function showImg(item) {
            let f = item.files[0];
            // console.log(f);
            if (!f || !f.type.startsWith("image")) {
                document.querySelector("#msg").innerHTML = "请选择图片";
                return;
            }
            document.querySelector("#msg").innerHTML = "";
            let url = URL.createObjectURL(f);
            document.querySelector("#show").src = url;
        }

        $(function () {
            $("#loginName").blur(function () {
                var valName = $("#loginName").val();
                if (valName != ''  || valName.trim()!='' ) {
                    let p2 = $("#form").serializeArray();
                    var option = {
                        type: "post",
                        url: "./service/hqq0106-1.php",
                        data: p2,
                        dataType: "json",
                        success: function (result) {
                            console.log(result);
                            if (result) {
                                $("#cunzai").css("display", "");
                                $("#keyong").css("display", "none");
                            } else {
                                $("#cunzai").css("display", "none");
                                $("#keyong").css("display", "");
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            // console.log(jqXHR);
                            // console.log(textStatus);
                            // // console.log(errorThrown);
                        },
                        async: true,
                        complete: function (jqXHR, textStatus) {
                            console.log('complete');
                        }
                    };
                    $.ajax(option);
                }
            });
        });


        function doZhuce() {
            // let p2 = $("#form").serializeArray();//表单序列化
            var passwordVal = $("#password").val();
            var repasswordVal = $("#rePassword").val();
            if (passwordVal != repasswordVal) {
                alert("两次输入的密码不一致！");
                return false;
            }
            
            var formData=new FormData($("#form")[0]);//当需要上传文件时，不能用表单序列化

            var option = {
                type: "post",
                url: "./service/hqq0106-2.php",
                data: formData,
                dataType: "json",
                contentType: false,// 文件上传时, 必须设置为false
                processData: false, // 文件上传时, 必须设置为false
                success: function (result) {
                    console.log(result);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // console.log(jqXHR);
                    // console.log(textStatus);
                    // console.log(errorThrown);
                },
                async: true,
                complete: function (jqXHR, textStatus) {
                    console.log('complete');
                }
            };
            $.ajax(option);


        }


    </script>
</head>

<body>
    <h2>注册</h2>
    <div style="color:red;font-size: 24px;" id="msg"></div>
    <form id="form" action="" method="post" enctype="multipart/form-data">
        <div>
            <label>登录名: <input id="loginName" type="text" name="loginName"></label>
            <span id="cunzai" style="color:red;display: none;">用户名已存在</span>
            <span id="keyong" style="color:green;display: none;">登录名可用</span>
        </div>
        <div>
            <label>密码: <input id="password" type="password" name="password"></label>
        </div>
        <div>
            <label>确认密码: <input id="rePassword" type="password" name="rePassword"></label>
        </div>
        <div>
            <label>手机号码: <input type="text" name="phone"></label>
        </div>
        <div>
            <label>头像: <input id="f" type="file" name="headImage" onchange="showImg(this)"></label>
            <img id="show" style="width: 300px;vertical-align: top;" src="" alt="暂无图片" />
        </div>
        <div>
            <!-- <input type="submit" value="注册" onclick="doZhuce()"> -->
            <input type="button" value="注册" onclick="doZhuce()">
        </div>
    </form>
</body>

</html>